<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { useClient } from '../../constants/client';
import { ClusterConfigClient, ClusterConfig, ClusterConfigSummaryViewModel } from '../../services/client';
import ClusterEditor from './ClusterEditor.vue';
import { ElLoading, ElMessage, ElMessageBox, ElMessageBoxOptions } from 'element-plus';
import clientHelper from '../../services/clientHelper'

const errorHandler = clientHelper.useRequestExceptionHandler(ElMessage, (opts: ElMessageBoxOptions) => {
    ElMessageBox(opts);
})

const clusterConfigClient = useClient(ClusterConfigClient);
const clusterConfigs = ref<ClusterConfigSummaryViewModel[]>([])
const editorDrawer = ref<boolean>(false);
const editingClusterConfig = ref<ClusterConfig>(new ClusterConfig());
const isCreateNewConfig = ref(false);

const load = () => {
    return clusterConfigClient.listAll()
}

const clearEditingClusterConfig = () => {
    editingClusterConfig.value = new ClusterConfig();
}

const create = () => {
    editorDrawer.value = true;
    isCreateNewConfig.value = true;
    clearEditingClusterConfig();
}

const deleteConfig = (clusterId: string) => {
    const loading = ElLoading.service();
    clusterConfigClient.delete(clusterId).then(result => {
        if (result.succeeded) {
            ElMessage.success({ message: '删除成功！' });
        }
    }).catch(errorHandler).finally(() => {
        refershList();
        loading.close();
    })
}

const edit = (data: ClusterConfig) => {
    clusterConfigClient.detail(data.clusterId).then(config => {
        editingClusterConfig.value = config;
        isCreateNewConfig.value = false;
        editorDrawer.value = true;
    }).catch(errorHandler)
}

const editorTitle = computed(() => {
    if (isCreateNewConfig.value) {
        return '新增'
    }
    else {
        return '编辑'
    }
})

const refershList = () => {
    const loading = ElLoading.service();
    load().then(datas => {
        clusterConfigs.value = [...datas];
    }).catch(errorHandler).finally(() => {
        loading.close()
    });
}

const closeEditor = () => {
    editorDrawer.value = false;
}

const handleClosed = () => {
    isCreateNewConfig.value = false;
    clearEditingClusterConfig();
}

const save = (value: ClusterConfig) => {
    const loading = ElLoading.service();
    if (isCreateNewConfig.value) {
        clusterConfigClient.create(value)
            .then(result => {
                if (result.succeeded) {
                    // TODO: create success

                    ElMessage.success({
                        message: '保存成功！'
                    })

                    // done
                    closeEditor()
                    refershList()
                }
                else {
                    // TODO: create failed
                }
            })
            .catch(errorHandler)
            .finally(() => loading.close());
    }
    else {
        clusterConfigClient.save(value)
            .then(result => {
                if (result.succeeded) {

                    ElMessage.success({
                        message: '保存成功！'
                    })

                    // done
                    closeEditor()
                    refershList()
                }
                else {

                }
            })
            .catch(errorHandler)
            .finally(() => { loading.close() });
    }
}

const cancel = () => {
    closeEditor()

}

onMounted(() => {
    const loading = ElLoading.service();
    load().then(datas => {
        clusterConfigs.value = [...datas];
    }).catch(errorHandler).finally(() => loading.close())
})

</script>

<template>
    <ElRow>
        <ElCol>
            <ElSpace>
                <ElButton type="primary" @click="refershList()">
                    <el-icon>
                        <Search />
                    </el-icon>查询
                </ElButton>
                <ElButton @click="create">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </ElButton>
            </ElSpace>
        </ElCol>
    </ElRow>
    <ElRow>
        <ElCol>
            <ElTable :data="clusterConfigs">
                <ElTableColumn prop="clusterId" label="Cluster Id" />
                <ElTableColumn prop="clusterName" label="Cluster Name" />
                <ElTableColumn prop="description" label="Description" />
                <ElTableColumn prop="creationTime" label="Creation Time">
                    <template #default="scope: { row: ClusterConfig }">
                        <span v-timeformat="scope.row.creationTime"></span>
                    </template>
                </ElTableColumn>
                <ElTableColumn prop="lastModifiedTime" label="LastModified Time">
                    <template #default="scope: { row: ClusterConfig }">
                        <span v-timeformat="scope.row.lastModifiedTime"></span>
                    </template>
                </ElTableColumn>

                <ElTableColumn prop="operations" label="操作">
                    <template #default="scope: { row: ClusterConfig }">
                        <ElButton @click="edit(scope.row)">
                            <el-icon>
                                <EditPen />
                            </el-icon>
                        </ElButton>
                        <ElButton type="danger" @click="deleteConfig(scope.row.clusterId)">
                            <ElIcon>
                                <Delete />
                            </ElIcon>
                        </ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <ElDrawer v-model="editorDrawer" :title="editorTitle" size="80%" @closed="handleClosed"
                :destroy-on-close="true">
                <cluster-editor v-bind:is-create="isCreateNewConfig" :data="editingClusterConfig" @save="save"
                    @cancel="cancel" />
            </ElDrawer>
        </ElCol>
    </ElRow>
</template>

<style scoped></style>